<template>
  <!-- 外层容器，设置背景图和居中显示 -->
  <div class="wapper">
    <!-- 卡片组件，设置最大宽度为 480px -->
    <el-card style="max-width: 480px">
      <!-- 表单组件，绑定 formData 对象，设置标签宽度为自动，引用 form1Ref，添加验证规则 -->
      <el-form :model="formData" label-width="auto" style="max-width: 600px" ref="form1Ref" :rules="rules">
        <!-- 电话输入框，绑定 formData.tel，设置验证规则 -->
        <el-form-item label="电话" prop="tel">
          <el-input v-model="formData.tel" />
        </el-form-item>
        <!-- 密码输入框，绑定 formData.password，设置验证规则，类型为 password，显示密码图标 -->
        <el-form-item label="密码" prop="password">
          <el-input v-model="formData.password" type="password" show-password />
        </el-form-item>
        <!-- 登录和重置按钮 -->
        <el-form-item>
          <el-button type="primary" @click="submitForm()">登录</el-button>
          <el-button @click="resetForm()">重置</el-button>
        </el-form-item>
      </el-form>
      <!-- 卡片底部，提供没有账号去注册的链接 -->
      <template #footer>
        <el-button link type="primary" @click="register">没有账号?去注册</el-button>
      </template>
    </el-card>
  </div>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue';
import { userApi } from '@/api';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import { Md5 } from 'ts-md5';
import { wmsStore } from '@/store/pinia';
import { jwtDecode } from 'jwt-decode';

// 获取 Pinia 存储实例
const store = wmsStore();

// 获取当前页面的信息
const route = useRoute();
// 负责页面跳转
const router = useRouter();

// 跳转到注册页面
const register = () => {
  router.push({ name: "user.register" });
}

// 表单引用
const form1Ref = ref();

// 表单数据对象
const formData = reactive({
  tel: '17613127270',
  password: "123456lK"
});

// 表单验证规则
const rules = {
  tel: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/, message: '手机号不正确', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { pattern: /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$/, message: '必须包含大小写字母和数字的组合，长度在8-10之间', trigger: 'blur' },
  ]
};

// 提交表单的方法
const submit = () => {
  const md5Pwd = Md5.hashStr(formData.password).toUpperCase();
  userApi.login.call({ ...formData, password: md5Pwd }).then((res: any) => {
    store.token = res;
    ElMessage({
      message: '登录成功',
      type: 'success',
    });

    // 解析 JWT 令牌并存储昵称
    let tokenObject: any = jwtDecode(res);
    store.nickName = tokenObject.nickName;
    store.roles=tokenObject.roles;
    store.permissions=tokenObject.permissions;

    // 跳转到首页
    router.push({ name: "home" });
  });
}

// 提交表单的异步方法
const submitForm = async () => {
  await form1Ref.value.validate((valid: any, fields: any) => {
    if (valid) {
      submit();
    }
  });
}

// 重置表单的方法
const resetForm = () => {
  form1Ref.value.resetFields();
}
</script>
<style scoped>
.wapper {
    background: url('/1.png');
    background-size: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

</style>